<template>
  <div class="">
    <!-- <x-header class="header" :left-options="{backText: ''}">宽带安装</x-header> -->
    <div class="pad" style="font-size:0.8em;">
      <!-- <div class="msg">已选择<span class="product">“大王卡”</span></div> -->
        <div class="msg">根据国家实名制要求，请准确提供身份证信息</div>
      <group title="" label-width="5.5em" label-margin-right="2em">
        
        <x-input title="姓名" placeholder="输入联系人姓名" v-model="fname"></x-input>
        <x-input title="身份证号" placeholder="输入身份证号" v-model="unumber"></x-input>
        <x-input title="联系电话" placeholder="联系人手机号码" mask="999 9999 9999" v-model="fmobile" :max="13" is-type="china-mobile" required></x-input>
        <br/>
        <divider></divider>
        <popup-picker title="所在地区" :data="addresslist" v-model="faddress" placeholder="请选择盟市" value-text-align="left" show-name></popup-picker>
        <x-input title="详细地址" placeholder="街道/镇+村/小区/写字楼+门牌号" v-model="faddress[1]"></x-input>
        <x-input title="选择号码" placeholder="" v-model="selmobile" :max="13" readonly required @click.native="showDialog"></x-input>
      </group>
      <div style="padding:15px;">
        <check-icon :value.sync="agree"  type="plain"><span style="font-size:0.85em;">我已阅读并同意《客户入网服务协议及业务协议》</span></check-icon>
        <br/>
        <br/>
        <x-button @click.native="onSubmit" :gradients="['#82C2E6', '#7CA700']">立即提交</x-button>
      </div>
    </div>
    <div>
      <x-dialog v-model="showScrollBox" class="dialog-demo">
        <p class="dialog-title">可选号码</p>
        <div class="img-box" style="height:300px;padding:15px 0;overflow:scroll;-webkit-overflow-scrolling:touch;">
          <ul>
            <li v-for="(x,i) in mobilePool" :key="i" @click="onSelect(x)">{{x}}</li>
          </ul>
        </div>
        <div @click="showScrollBox=false">
          <span class="vux-close"></span>
        </div>
      </x-dialog>
    </div>
  </div>
</template>

<script>

import { XHeader, Group, XInput, Divider, XNumber, XButton,PopupPicker,XDialog,CheckIcon } from "vux";
import map from 'lodash/map';
import filter from 'lodash/filter';
var jsonp=require("jsonp")
var querystring = require('querystring')
// let HOST="http://10.68.50.117:8084";
let HOST="http://192.168.0.125:8084";
// let HOST="http://weixin.nmict.cn:8084";
let list1=[[
  {name:'呼和浩特市',value:"101"}, {name:'包头市',value:"102"}, {name:'乌海市',value:"106"}, {name:'赤峰市',value:"107"},
   {name:'通辽市',value:"109"}, {name:'鄂尔多斯市',value:"104"}, {name:'呼伦贝尔市',value:"108"},{name:'巴彦淖尔市',value:"105"},
   {name:'乌兰察布市',value:"103"},{name:'兴安盟',value:"113"},{name:'锡林郭勒盟',value:"111"},{name:'阿拉善盟',value:"114"}]];
export default {
  data() {
    return {

      addresslist:list1,
      faddress:[],
      fmobile: '',
      fname: "",
      unumber: "",
      selmobile:"",
      showScrollBox:false,
      agree:true,
      mobilePool:[]
    };
  },
  methods: {
    async onSubmit() {
      // console.log(this.faddress[0])
      // if (this.fmobile == "" || this.fname == "" || this.fnumber == "") {
      //   this.$vux.toast.show({
      //     type: "warn",
      //     text: "请填写必要信息"
      //   });
      //   return;
      // }
      
      // let resp=await this.$store.dispatch("checkCustInfo",{idCardName:this.fname,idCardVal:this.unumber,goodsId:"101708147369"})
      // if(resp.data.resultCode=="00"){
      //     let keys=await this.$store.dispatch("buyNumCommon",{cityCode:this.faddress[0],number:this.selmobile,goodsId:"101708147369"})
      // }else{
      //   this.$vux.toast.show({
      //       type: "warn",
      //       text: resp.data.resultDesc
      //   });
      // }

      let keys=await this.$store.dispatch("buyNumCommon",{cityCode:this.faddress[0],number:this.selmobile,goodsId:"101708147369"})
    },
    async checkCustInfo(){
      return this.$store.dispatch("checkCustInfo",{idCardName:this.fname,idCardVal:this.unumber,goodsId:"101708147369"});
    },
    onSelect(item){
      this.selmobile=item;
      this.showScrollBox=false;

      this.$store.dispatch("occupyNumber",{cityCode:this.faddress[0],numID:this.selmobile,goodsId:"101708147369"}).then(resp=>{
        if(resp.data=="SUCCESS"){
          this.$vux.toast.show({
            type: "info",
            text: "锁定成功"
          });
        }
      })
    },
    showDialog(){
      if(this.faddress.length==0){
        this.$vux.toast.show({
          type: "warn",
          text: "请选择所在城市"
        });
        return;
      }
      this.showScrollBox=true
      let ENDPOINT="https://m.10010.com/NumApp/NumberCenter/qryNum"
      let p=`sysCode=mall&provinceCode=10&cityCode=${this.faddress[0]}&searchValue=&codeTypeCode=&net=01&goodsNet=4&searchCategory=3&judgeType=1&qryType=02&groupKey=6300273079&_=`+new Date().getTime()
      jsonp(`${ENDPOINT}?${p}`, { name: 'jsonp_queryMoreNums' },  (err, data)=> {
        if (err) throw err;
        this.mobilePool=filter(data.numArray,x=>x>10000000000)
        console.log(data)
      });
    },
   
  },
  components: {
    XHeader,
    Group,
    XInput,
    Divider,
    XNumber,
    XButton,
  
    PopupPicker,
    XDialog,
    CheckIcon
  }
};

function changeCityCode() {
		var city = $("#numberBelong").val();
		var cityName = "";
		if ("101" == city) {
			cityName = "呼和浩特";
		} else if ("102" == city) {
			cityName = "包头";
		} else if ("106" == city) {
			cityName = "乌海";
		} else if ("107" == city) {
			cityName = "赤峰";
		} else if ("108" == city) {
			cityName = "呼伦贝尔";
		} else if ("113" == city) {
			cityName = "兴安盟";
		} else if ("109" == city) {
			cityName = "通辽";
		} else if ("103" == city) {
			cityName = "乌兰察布";
		} else if ("105" == city) {
			cityName = "巴彦淖尔";
		} else if ("114" == city) {
			cityName = "阿拉善盟";
		} else if ("104" == city) {
			cityName = "鄂尔多斯";
		} else {
			cityName = "锡林郭勒盟";
		}
		var content = "<span>" + cityName + "</span>";
		$("#nowCity").html(content);
		autoNum();
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import '~vux/src/styles/close';

.msg{
  line-height: 2.25em;
  padding-left: 0.8em;
  font-size: 1.15em;
  .product{
    color:#dba95e;
  }
}
.dialog-demo {
  .weui-dialog{
    border-radius: 8px;
    padding-bottom: 8px;
  }
  .dialog-title {
    line-height: 30px;
    color: #666;
  }
  .img-box {
    height: 350px;
    overflow: hidden;
    li{
      list-style: none;
      float: left;
      width:130px;
      margin-top:8px;
    }
  }
  .vux-close {
    // margin-top: 8px;
    // margin-bottom: 8px;
  }
}
</style>
